<template>
	<view class="content">
		<view class="scroll-container" @click="selectBody">
			<view class="rotated-text" :style="{'fontSize':fonstSizeNum+'px'}">{{repeatedText}} <span style="opacity: 0;">000000</span> </view>
			<view class="rotated-text" :style="{'fontSize':fonstSizeNum+'px'}">{{repeatedText}} <span style="opacity: 0;">000000</span> </view>
		</view>	
		<view class="btn-bottom" v-if="btnTF">
			<view class="btn-home">
				主页
			</view>
			<input class="input-shuru" type="text"  @blur="inputSetText" placeholder="请输入文字"/>
			<view class="btn-set">
				设置
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				repeatedText:'手机灯牌',
				duration:20,
				fonstSizeNum:200,
				textWidth:0,
				screenInfo:{},
				widthS:'',
				heights:'',
				btnTF:true,//控制输入框
			}
		},
		onLoad() {
			this.screenInfo = uni.getWindowInfo()
			console.log(this.screenInfo)
		},
		computed:{
			
		},
		
		methods:{
			selectBody(){
				this.btnTF = !this.btnTF
			},
			inputSetText(e){
				if(e.detail.value){
					this.repeatedText = e.detail.value
				}else{
					this.repeatedText = '手机灯牌'
				}
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100vh;
		background: #000;
	}
	.scroll-container {
		min-width: 100vh;
		height: 100vw;
		transform-origin: 50vw 50vw;
		transform: rotate(90deg);
		overflow: hidden;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	 
	.rotated-text {
		display: block;
		white-space: nowrap;
		color: #fff;
		animation: scrollText 15s linear infinite;
	}
	@keyframes scrollText  {
		0% {
			transform: translateX(100%);
		  }
		  100% {
			transform: translateX(-100%);
		  }
	}
	.btn-bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-items: center;
		padding: 0 15px;
		padding-bottom: env(safe-area-inset-bottom);
		background:rgba(0,0,0,0.5);
		box-sizing: border-box;
	}
	.btn-home{
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		background: #999;
		color: #fff;
	}
	.input-shuru{
		width: calc(100% - 100px);
		margin: 0 5px;
		border: 1px solid #fff;
		background: transparent;
		color: #fff;
		border-radius: 20px;
		height: 45px;
		box-sizing: border-box;
		padding: 0 20px;
		line-height: 45px;
		font-size: 16px;
	}
	.btn-set{
		width: 45px;
		height: 45px;
		color: #fff;
		background: #5a5aad;
		text-align: center;
		line-height: 50px;
	}
</style>